"use strict"
import Vue from 'vue';
import Vuex from 'vuex';

// import state from './state.js';
// import mutations from './Mutations.js';
// import Actions from './Actions.js';

// modules
import aModules from './modules/aModules.js';
import bModules from './modules/bModules.js';

Vue.use(Vuex)

export default new Vuex.Store({
	/* 仓库 状态（数据） */
	// state,
	/* 仓库 状态 数据） */
	state: {
		count: 0,
		countAlias: 'count',
	},
	
	// 计算 store 中的 state 中的派生出一些状态 和属性相关
	// 计算属性
	getters: {
		showGet(state) {
			return state.countAlias.slice(0, 2)
		}
	},

	// 更改 store 中的状态的唯一方法是提交 mutation
	// 在 mutation 中使用异步会很难调试
	// mutations,
	/* 改变 store 中的状态 */
	mutations: {
		increment(state) {
				console.log('state 触发', state);
				state.count++
		},
		btn(state, payload) {
			console.log('btn state payload', state, payload);
			// 调用 mutation 中的方法
			this.commit('increment')
		},
		useMutationsInMehtods() {
			console.log('在组件的methods中使用mutation');
		},
		// 使用 actions 来触发 mutations 中的方法
		actionsDispatch(state){
			console.log('使用active来触发mutation', state);
		},
	},

	// 提交 mutations 的
	/* 
		action 类似于 mutation，不同于
		Action 提交的是 mutation，而不是直接变更状态
		Action 可以包含任意异步操作
	*/
	actions: {
		// 使用 commit 激活方法
		actionsDispatchFn(context){
			// console.log('actions 中的 context', context);
			const commit = context["commit"]
			commit('actionsDispatch')
		}
	},

	// 引入分类
	modules: {
		aModules,
		bModules,
	}

})